<template>
  <div>
    <!-- 顶部 -->
      <Header/>
      <!-- tab -->
      <div class="tab-nav" >
        <el-tabs 
        v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
          v-loading="loading"
          >
          <el-tab-pane   v-for="(item,index) in tList"
          :key="index"  :label="item.name" :name="item.id+''">
               <div class="list">
                   <span class="text">{{item.frontName}}</span>
               </div>
               <!-- 图文列表 -->
               <div class="listPic">
                <!-- item -->
                   <div class="list-item" v-for="(item,index) in itemList " :key="index">
                       <img  v-loading="loading" class="img" :src="item.listPicUrl" alt="">
                       <span style="font-size:16px" >{{item.name}}</span>
                        <div>
                           <span style="font-size:5px;color:red">￥</span>
                           <span style="font-size:20px;color:red;font-weight:700">{{item.retailPrice}}</span>
                        </div>
                        <div >
                            <div class="end"  v-if="item.finalPriceInfoVO.banner" >
                              <div class="end-left" v-if="(item.finalPriceInfoVO.banner||'').title" > 
                                 {{(item.finalPriceInfoVO.banner||'').title
                                 }}
                              </div>
                              <div class="end-right" v-if="(item.finalPriceInfoVO.banner||'').content">
                                {{(item.finalPriceInfoVO.banner||'').content
                              }}
                              </div>
                            </div>
                        </div>
                   </div>
                
                
               </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="Config" name="second">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
        </el-tabs>
      </div>
      <!-- 底部 -->
      <div class="footer">
         更多内容 敬请期待
      </div>
  </div>
</template>

<script setup lang="ts">
import {  House, Search,ShoppingCart } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {useRoute} from 'vue-router'
import {useCategoryStore} from '../../stores/catrgory'
import Header from '../../components/wcj-Header/index.vue'
let  categoryStore:any = useCategoryStore()
const loading = ref(false)
const route =useRoute()
const activeName = ref('')
let tList:any = ref([])
let itemList:any = ref([])
let arr =ref({
  categoryId:route.query.categoryId,
  subCategoryId: route.query.subCategoryId,
  categoryType:route.query.categoryType
})
onMounted (()=>{
  gooList(route.query)
  console.log(route.query.subCategoryId);
  activeName.value = route.query.subCategoryId+''
  
})
const gooList =async(obj:any)=>{
  loading.value = true;
  let res = await categoryStore.detailList(obj)
  tList.value = res.categoryL2List
  itemList.value = res.categoryItems.itemList
  loading.value = false;
  // console.log(itemList.value);
  // console.log(tList.value);
  // console.log(res);
  
 }
const handleClick = (tab: TabsPaneContext, event: Event) => {
  arr.value.subCategoryId = activeName.value
  gooList(arr.value)
}


</script>

<style scoped>
.top{
  width: 375px;
  height: 44px;
  background-color: #fafafa;
  border-bottom: 1px solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.title{
  font-size: 19px;
  font-weight: 700;
}
.demo-tabs > .el-tabs__content {
  padding: 18px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tab-nav /deep/ .is-active{
  color: red;
}
.tab-nav /deep/ .el-tabs__active-bar{
  background-color: red;
}
.text{
  font-size: 16px;
}
.list{
  margin: 10px;
  text-align: center;
}
.tab-nav /deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2){
   padding-left: 20px;
}
.listPic{
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.listPic .list-item{
  flex:1;
  min-width: calc((100%-10px)/2);
  padding-bottom: 20px;
}
.listPic .img{
  width: 173px;
  height: 173px;
}
.end{
  width: 100%;
  height: 23px;
  background-color: #FFE9EB;
  border-radius: 10px;
  font-size: 10px;
  color: red;
  box-sizing: border-box;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.end-left{
  padding: 4px 10px;
  height: 18px;
  background-color: red;
  border-radius: 10px;
  left: 0;
  top: 0;
  color: #fff;
  padding-top: 3px;
}
.end-right{
  padding-left: 10px;
}
.footer{
   width: 100%;
   height: 48px;
   background-color: #EEE;
   text-align: center;
   line-height: 48px;
   font-size: 12px;
   color: rgb(177, 173, 173);
}
</style>